/**
  @Description: 商品详情页 由于是Mock数据通过上级页面通过路由的query传值
 */
<template>
  <div class="goods-detail">
    <!-- 顶部 -->
    <van-nav-bar
      left-arrow
      :fixed=true
      title="商品详情"
      @click-left="handleToBack"
    >
    </van-nav-bar>

    <div class="goodsDetail-wrap">
      <!-- 商品图片 -->
      <div class="goods-img">
        <img :src="goodsInfo.small_image" alt="">
      </div>
      <!-- 限时抢购 -->
      <div class="flash-wrap" v-show="goodsInfo.isFlash">
        <div class="flash-text">
          <span>限时抢购</span>
          <i>抢购中</i>
        </div>
        <div class="flash-time">
          <span class="time-text">距结束</span>
          <!-- 倒计时 -->
          <van-count-down
            :time="time"
            class="count-time"
            format="HH mm ss"
          >
            <template v-slot="timeData">
              <span class="item">{{ timeData.hours }}</span>
              <i>:</i>
              <span class="item">{{ timeData.minutes }}</span>
              <i>:</i>
              <span class="item">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
      </div>
      <!-- 商品名称 -->
      <div class="product-info">
        <p class="product-name">{{goodsInfo.name}}</p>
        <p class="product-desc">{{goodsInfo.spec}}</p>
        <span class="price">￥{{goodsInfo.price}}</span>
        <span class="normal-price">￥{{goodsInfo.origin_price}}</span>
        <span class="total-sales">已售：{{goodsInfo.total_sales}}</span>
        <van-divider />
        <div class="shippingInfo">
          <van-icon name="cluster-o" /><span>此商品按500g/份计价，如实收少于500g将退还差价</span>
        </div>
        <van-divider />
        <div class="shippingInfo">
          <van-icon name="clock-o" />
          <span>最快29分钟内送达</span>
        </div>
      </div>
      <!-- 规格 -->
      <div class="specifications">
        <div class="specificationsTitle"><span>规格</span> </div>
        <van-divider dashed />
        <div class="conditions">
          <span>保存条件</span>
          <span class="conditionsOne">冷藏</span>
        </div>
        <van-divider dashed />
        <div class="conditions">
          <span>保质期</span>
          <span class="conditionsTwo">15天</span>
        </div>
        <van-divider dashed />
      </div>
      <div class="showGoods">
        <img :src="goodsInfo.small_image"
             alt="">
        <img :src="goodsImage"
             alt="">
      </div>
      <!-- 底部导航 -->
      <van-goods-action
        :safe-area-inset-bottom=true
        style="z-index:100"
      >
        <van-goods-action-icon
          icon="cart-o"
          :badge="goodsNum"
          text="购物车"
          @click="onClickCart"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="handleToaddToCar"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { ADD_TO_CART } from '@/config/pubsub-type'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'GoodsDetail',
  data () {
    return {
      time: 30 * 60 * 1000 * 100,
      // 是否显示限时抢购，默认false
      isFlash: false,
      goodsInfo: this.$route.query,
      goodsImage: 'https:\/\/img.ddimg.mobi\/3f280ff77ab3d1571213379189.jpg?width=750&height=1869'
    }
  },
  computed: {
    goodsNum () {
      return Object.values(this.shopCart).reduce((total, cur) => (total + cur.num, total), 0)
    },
    ...mapGetters(['shopCart'])
  },
  methods: {
    handleToBack () {
      this.$router.back()
    },
    onClickCart () {
      this.$router.push({ name: 'Cart' })
    },
    handleToaddToCar () {
      this.addToCart(this.goodsInfo)
    },
    ...mapMutations({
      addToCart: 'ADD_TO_CART'
    })
  }
}

</script>
<style lang='scss' scoped>
.goods-detail {
  background: #f5f5f5;
  .goodsDetail-wrap {
    overflow: hidden;
    margin-top: px2rem(46);
    .goods-img {
      width: 100%;
      img {
        width: 100%;
        height: 80%;
      }
    }
    .flash-wrap {
      display: flex;
      .flash-text {
        width: 55%;
        height: px2rem(34);
        line-height: px2rem(34);
        background:#e25450;
        span {
          font-size: px2rem(13);
          color: #fff;
          padding-left: px2rem(17);
        }
        i {
          padding-left: px2rem(10);
          font-size: px2rem(8);
          color: #fff;
        }
      }
      .flash-time {
        width: 45%;
        height: px2rem(34);
        line-height: px2rem(34);
        background:#fcefe9;
        font-size: px2rem(8);
        color: #e25450;
        padding-left: px2rem(8);
        .count-time {
          display: inline;
          margin-left: px2rem(5);
          .item {
            display: inline-block;
            width: 22px;
            margin-right: 5px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color:#e25450;
          }
          i {
            color: #e25450;
            padding-right: px2rem(3);
          }
        }
      }
    }
    .product-info {
      background: #fff;
      padding: px2rem(8);
      .product-name {
        color: black;
        font-size: px2rem(12);
      }
      .product-desc {
        padding: px2rem(8) 0;
        color: grey;
        font-size: px2rem(10);
      }
      .price {
        color: #e25450;
        padding-right: px2rem(8);
        font-size: px2rem(14);
      }
      .normal-price {
        color: grey;
        font-size: px2rem(8);
        text-decoration: line-through;
      }
      .total-sales {
        float: right;
        color: #e25450;
        font-size: px2rem(14);
      }
      .shippingInfo {
        span {
          height: px2rem(13);
          font-size: px2rem(10);
          color: grey;
          padding-left: px2rem(3);
          vertical-align: top;
        }
      }
    }
    .specifications {
      width: 100%;
      background-color: #fff;
      margin-top: px2rem(17);
      padding-left: px2rem(8);
      .specificationsTitle {
        padding-top: px2rem(17);
        font-size:  px2rem(17);
        color: black;
      }
      .conditions {
        height: px2rem(17);
        font-size: px2rem(10);
        color: grey;
        .conditionsOne {
          padding-left: px2rem(34);
        }
        .conditionsTwo {
          padding-left: px2rem(42);
        }
      }
    }
    .showGoods {
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
}
</style>
